<script setup lang="ts">
import { useAppStore } from '@/stores/app'
import { NButton, NCard, NSpace, NTag, NGradientText } from 'naive-ui'
import { onMounted, ref } from "vue"
import OpenSourceCelebration from '@/components/OpenSourceCelebration.vue'

const store = useAppStore()

const countDown = ref(0)

function updateCountdown() {
  const now = new Date()
  const target = new Date(2025, 6, 30) // 2025年7月30日
  const diff = target.getTime() - now.getTime()
  countDown.value = diff > 0 ? diff : 0
}

onMounted(() => {
  updateCountdown()
  setInterval(updateCountdown, 1000)
})

function formatCountdown(ms: number) {
  const seconds = Math.floor((ms / 1000) % 60)
  const minutes = Math.floor((ms / 1000 / 60) % 60)
  const hours = Math.floor((ms / (1000 * 60 * 60)) % 24)
  const days = Math.floor(ms / (1000 * 60 * 60 * 24))
  const result :Array<string>= []
  if (days > 0 ){
    result.push(`${days}天`)
  }
  if (hours > 0) {
    result.push(`${hours}小时`)
  }
  if (minutes > 0) {
    result.push(`${minutes}分钟`)
  }
  if (seconds > 0) {
    result.push(`${seconds}秒`)
  }
  return result.join(' ')
}
</script>

<template>
  <main>
    <OpenSourceCelebration :countDown="countDown" />
    
    <section id="about" class="hero">
      <div class="hero-content">
        <h2>欢迎使用 <NGradientText :gradient="{ from: '#7b82ff', to: '#b4b8ff' }">仓颉语言</NGradientText></h2>
        <h3>开源倒计时 <NGradientText :gradient="{ from: '#0576f2', to: '#00e996' }">{{ formatCountdown(countDown) }}</NGradientText></h3>
        <p class="hero-description">{{ store.organization.description }}</p>
        <div class="code-example">
          <NCard
            :bordered="false"
            :style="{
              background: 'rgba(30, 30, 30, 0.95)',
              border: '1px solid rgba(255, 255, 255, 0.1)',
              borderRadius: '8px'
            }"
            content-style="padding: 0;"
          >
            <pre><code><span class="comment">// 仓颉语言示例</span>
<span class="keyword">func</span> <span class="function">iter</span><span class="punctuation">(</span><span class="function">n</span><span class="punctuation">:</span> <span class="type">Int64</span><span class="punctuation">,</span> <span class="function">x0</span><span class="punctuation">:</span> <span class="type">Float64</span><span class="punctuation">,</span> <span class="function">f</span><span class="punctuation">:</span> <span class="punctuation">(</span><span class="type">Float64</span><span class="punctuation">)</span> <span class="operator">-></span> <span class="type">Float64</span><span class="punctuation">)</span> <span class="punctuation">{</span>
    <span class="keyword">var</span> x <span class="operator">=</span> x0
    <span class="keyword">for</span> <span class="punctuation">(</span>_ <span class="keyword">in</span> <span class="number">0</span><span class="operator">..</span>n<span class="punctuation">)</span> <span class="punctuation">{</span>
        <span class="function">print</span><span class="punctuation">(</span><span class="string">"${x}, "</span><span class="punctuation">)</span>
        x <span class="operator">=</span> <span class="function">f</span><span class="punctuation">(</span>x<span class="punctuation">)</span>
    <span class="punctuation">}</span>
    <span class="function">println</span><span class="punctuation">(</span><span class="string">"${x}"</span><span class="punctuation">)</span>
<span class="punctuation">}</span>

<span class="function">main</span><span class="punctuation">()</span> <span class="punctuation">{</span>
    <span class="function">iter</span><span class="punctuation">(</span><span class="number">5</span><span class="punctuation">,</span> <span class="number">0.8</span><span class="punctuation">,</span> <span class="punctuation">{</span> x<span class="punctuation">:</span> <span class="type">Float64</span> <span class="operator">=></span> <span class="number">1.0</span> <span class="operator">/</span> <span class="punctuation">(</span><span class="number">1.0</span> <span class="operator">-</span> x<span class="punctuation">)</span><span class="punctuation">}</span><span class="punctuation">)</span>
    <span class="function">iter</span><span class="punctuation">(</span><span class="number">10</span><span class="punctuation">,</span> <span class="number">0.8</span><span class="punctuation">,</span> <span class="punctuation">{</span> x<span class="punctuation">:</span> <span class="type">Float64</span> <span class="operator">=></span>
        <span class="number">4.0</span> <span class="operator">*</span> x <span class="operator">*</span> <span class="punctuation">(</span><span class="number">1.0</span> <span class="operator">-</span> x<span class="punctuation">)</span>
    <span class="punctuation">}</span><span class="punctuation">)</span>
<span class="punctuation">}</span></code></pre>
          </NCard>
        </div>
        <div class="cta-buttons">
          <NSpace justify="center">
            <NButton
              size="large"
              tag="a"
              href="https://cangjie-lang.cn/playground"
              target="_blank"
              :style="{
                background: 'linear-gradient(135deg, #7b82ff 0%, #9ba0ff 100%)',
                border: 'none',
                color: '#ffffff',
                padding: '0.8rem 2rem',
                fontWeight: '500',
                boxShadow: '0 4px 16px rgba(123, 130, 255, 0.3)',
                transition: 'all 0.3s ease'
              }"
              :hover-style="{
                background: 'linear-gradient(135deg, #8a91ff 0%, #a5a9ff 100%)',
                transform: 'translateY(-2px)',
                boxShadow: '0 6px 20px rgba(123, 130, 255, 0.4)'
              }"
            >
              开始使用
            </NButton>
            <NButton
                size="large"
                tag="a"
                href="https://playground.cj.zxilly.dev/"
                target="_blank"
                :style="{
                background: 'linear-gradient(135deg, #0576F2FF 0%, #00E996FF 100%)',
                border: 'none',
                color: '#ffffff',
                padding: '0.8rem 2rem',
                fontWeight: '500',
                boxShadow: '0 4px 16px rgba(123, 130, 255, 0.3)',
                transition: 'all 0.3s ease'
              }"
                :hover-style="{
                background: 'linear-gradient(135deg, #8a91ff 0%, #a5a9ff 100%)',
                transform: 'translateY(-2px)',
                boxShadow: '0 6px 20px rgba(123, 130, 255, 0.4)'
              }"
            >
              Playground
            </NButton>
            <NButton
              size="large"
              tag="a"
              href="#features"
              :style="{
                color: '#7b82ff',
                borderColor: '#7b82ff',
                background: 'rgba(123, 130, 255, 0.1)',
                padding: '0.8rem 2rem',
                fontWeight: '500',
                transition: 'all 0.3s ease'
              }"
              :hover-style="{
                background: 'rgba(123, 130, 255, 0.15)',
                transform: 'translateY(-2px)',
                boxShadow: '0 4px 12px rgba(123, 130, 255, 0.2)'
              }"
            >
              了解更多
            </NButton>
          </NSpace>
        </div>
      </div>
    </section>

    <section id="features" class="features">
      <h2>核心优势</h2>
      <div class="feature-grid">
        <NCard v-for="feature in store.organization.features"
               :key="feature.title"
               class="feature-card"
               :bordered="false"
               :style="{
                 background: 'linear-gradient(165deg, rgba(40, 40, 45, 0.8), rgba(25, 25, 30, 0.9))',
                 border: '1px solid rgba(123, 130, 255, 0.08)',
                 boxShadow: '0 8px 32px rgba(0, 0, 0, 0.15)',
                 backdropFilter: 'blur(12px)',
                 padding: '2rem',
                 borderRadius: '16px',
                 position: 'relative',
                 overflow: 'hidden'
               }">
          <div class="feature-glow"></div>
          <div class="feature-icon-wrapper">
            <div class="feature-icon">{{ feature.icon }}</div>
          </div>
          <h3>{{ feature.title }}</h3>
          <p>{{ feature.description }}</p>
          <template #footer>
            <NSpace justify="center">
              <NTag
                :bordered="false"
                type="primary"
                :style="{
                  background: 'linear-gradient(135deg, rgba(123, 130, 255, 0.15), rgba(123, 130, 255, 0.05))',
                  padding: '6px 16px',
                  fontSize: '0.9rem',
                  borderRadius: '8px',
                  border: '1px solid rgba(123, 130, 255, 0.1)',
                  boxShadow: '0 2px 8px rgba(123, 130, 255, 0.1)'
                }">
                {{ feature.title }}
              </NTag>
            </NSpace>
          </template>
        </NCard>
      </div>
    </section>
  </main>
</template>

<style scoped>
.hero {
  padding: 8rem 2rem 4rem;
  background: linear-gradient(135deg, #1a1a1a 0%, #2c2c2c 100%);
  min-height: 80vh;
  display: flex;
  align-items: center;
  width: 100%;
}

.hero-content {
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  text-align: center;
  padding: 0 1rem;
}

.hero h2 {
  font-size: 3.5rem;
  margin-bottom: 1.5rem;
  line-height: 1.2;
  color: #ffffff;
  font-weight: 600;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.hero h3 {
  font-size: 2.0rem;
  margin-bottom: 1.5rem;
  line-height: 1.2;
  color: #ffffff;
  font-weight: 600;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.hero-description {
  font-size: 1.25rem;
  max-width: 800px;
  margin: 0 auto 2rem;
  color: rgba(255, 255, 255, 0.95);
}

.features {
  padding: 6rem 2rem;
  background-color: #1a1a1a;
  width: 100%;
}

.features h2 {
  text-align: center;
  font-size: 2.5rem;
  margin-bottom: 3rem;
  color: #ffffff;
  font-weight: 600;
}

.feature-grid {
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
  padding: 0 1rem;
}

.feature-card {
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  text-align: center;
}

.feature-glow {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 120px;
  height: 120px;
  background: radial-gradient(circle, rgba(123, 130, 255, 0.15), transparent 70%);
  opacity: 0;
  transition: all 0.4s ease;
}

.feature-card:hover .feature-glow {
  opacity: 1;
  transform: translateX(-50%) scale(1.5);
}

.feature-icon-wrapper {
  position: relative;
  margin-bottom: 1.5rem;
}

.feature-icon {
  position: relative;
  width: 72px;
  height: 72px;
  margin: 0 auto;
  background: linear-gradient(135deg, rgba(123, 130, 255, 0.15), rgba(123, 130, 255, 0.05));
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  transition: all 0.4s ease;
  border: 1px solid rgba(123, 130, 255, 0.1);
}

.feature-card:hover {
  transform: translateY(-8px);
  background: linear-gradient(165deg, rgba(45, 45, 50, 0.9), rgba(30, 30, 35, 0.95)) !important;
  border-color: rgba(123, 130, 255, 0.15) !important;
  box-shadow:
    0 12px 40px rgba(0, 0, 0, 0.2),
    0 0 0 1px rgba(123, 130, 255, 0.1) !important;
}

.feature-card:hover .feature-icon {
  transform: scale(1.1);
  background: linear-gradient(135deg, rgba(123, 130, 255, 0.2), rgba(123, 130, 255, 0.1));
  box-shadow:
    0 8px 16px rgba(123, 130, 255, 0.15),
    0 0 0 1px rgba(123, 130, 255, 0.2);
}

.feature-card h3 {
  color: #7b82ff;
  margin-bottom: 1.2rem;
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  background: linear-gradient(135deg, #7b82ff, #9ba0ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.feature-card p {
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.7;
  font-size: 1rem;
  margin-bottom: 2rem;
  padding: 0 0.5rem;
}

.code-example {
  margin: 2rem auto;
  max-width: 800px;
  text-align: left;
  padding: 0;
}

.code-example pre {
  margin: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding: 1.5rem;
}

.code-example code {
  font-family: 'Fira Code', monospace;
  font-size: 0.95rem;
  line-height: 1.6;
  display: block;
  white-space: pre;
  color: rgba(255, 255, 255, 0.85);
}

/* 代码高亮 */
.code-example .comment {
  color: #6a9955;
  opacity: 0.9;
}

.code-example .keyword {
  color: #569cd6;
}

.code-example .function {
  color: #dcdcaa;
}

.code-example .type {
  color: #4ec9b0;
}

.code-example .string {
  color: #ce9178;
}

.code-example .number {
  color: #b5cea8;
}

.code-example .operator {
  color: #d4d4d4;
}

.code-example .punctuation {
  color: #808080;
}

@media (max-width: 768px) {
  .hero h2 {
    font-size: 2rem;
    margin-top: 1rem;
  }

  .hero-description {
    font-size: 1rem;
  }

  .hero {
    padding: 6rem 1rem 3rem;
    min-height: auto;
  }

  .features {
    padding: 4rem 1rem;
  }

  .features h2 {
    font-size: 1.8rem;
    margin-bottom: 2rem;
  }

  .feature-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .feature-card {
    padding: 1.5rem !important;
  }

  .feature-icon {
    width: 64px;
    height: 64px;
    font-size: 1.75rem;
  }

  .code-example {
    margin: 1.5rem auto;
    max-width: 100%;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .hero h2 {
    font-size: 3rem;
  }

  .hero {
    padding: 7rem 2rem 3.5rem;
  }

  .feature-grid {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  }

  .code-example {
    max-width: 90%;
  }
}
</style> 